<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/fore/foreHeader::html('课程性质分类')">
</head>
<!--<script src="webjars/jquery/2.0.0/jquery.min.js"></script>-->
<!--<link rel="stylesheet" href="webjars/bootstrap/3.0.1/css/bootstrap.min.css">-->
<!--<script src="webjars/bootstrap/3.0.1/js/bootstrap.min.js"></script>-->


<body>
<div id="workingArea" class="container-fluid">
    <!--导航栏-->
    <div th:replace="include/fore/foreNavigator::html"></div>

    <div class="col-md-12 " th:replace="include/fore/foreNav2::html"></div>

    <div>
        <div style="margin-top: 50px"></div>
        <h2 class="text-center"><b>放心托育</b></h2>
        <h2 class="text-center"><b>小学生一站式课后OMO托育提供者</b></h2>
        <div style="margin-top: 20px"></div>
        <h4 class="text-center">将孩子的习惯养成、课业学习、兴趣素能培养、品格塑造等贯穿，</h4>
        <h4 class="text-center"> 以OMO方式打造高品质托育服务</h4>
        <h4 class="text-center"> 一站式解决孩子课后教育问题。</h4>
    </div>

    <div class="col-md-12">
        <div class="col-md-6 text-center" v-for="bean in beans" style="height: 300px">
            <h3>{{bean.name}}</h3>
            <p>{{bean.description}}</p>
            <div class="col-md-12" style="min-height: 150px; ">
                <div class="col-md-3" v-for="subclass in bean.subclassList">
                    <p align="center">
                        {{subclass.name}}
                    </p>
                    <div v-if="subclass.img!=null">
                        <img height="88px" width="88px" :src="subclass.img" class="img-rounded">
                    </div>
                    <div v-else> </div>
                </div>
            </div>
            <div class="col-md-12" style="border: 2px black  ">
                <br>
                <a :href="'subClassPage?cid='+bean.id">了解更多</a>
            </div>

        </div>
    </div>


<!--<div style="height: 100px"></div>-->
    <!--<div th:replace="include/fore/foreFoot::html"></div>-->
</div>
</body>

<script>
    $(function () {


        var data4Vue = {
            uri: "category",
            beans: [],
            bean: ""
        };

        var vue = new Vue({
            el: "#workingArea",
            data: data4Vue,
            mounted: function () {
                this.list();
            },
            methods: {
                list: function () {
                    axios.get(this.uri).then(function (res) {
                        vue.beans = res.data.data.content;
                        console.log(vue.beans);
                    })
                }
            }
        })
    })
</script>
</html>